<template>
 <div>
    <div class="search-content">
    <form @submit.prevent="Seach_btn">
        <input type="search" placeholder="搜索商家" v-model="companyName">
    </form>
      
      <i class="icon" @click="Seach_btn" ></i>
    </div>
    <!-- 新增tab栏 -->
    <div class="new_box">
        <ul>
            <li :class="{active:1==his}" @click="ones(1)">我的社群</li>
            <li :class="{active:2==his}" @click="ones(2)">全部社群</li>
        </ul>
    </div>
  <div class="interaction-con"  v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10" ref="gundong">
      <div class="line-wrapper" v-for="item in list" :key="item.companyId" @click="href(item.companyId)">
          <div class="line-scroll-wrapper">
              <div class="line-normal-wrapper">
                  <div class="line-normal-left-wrapper">
                  </div>
                  <div class="line-normal-icon-wrapper">
                      <div class="left-icon linkType">
                          <img :src="item.remark" alt="">
                      </div>
                      <div class="right-info">
                          <p class="title adTitle">{{item.companyName}}</p>
                          <p v-if="item.mtime==''||item.mtime==null||item.mtime==undefined"></p>
                          <p class="text adContent" v-else><i class="icon" ></i>最后访问 {{item.mtime |formatDate('YYYY-MM-DD HH:mm')}}</p>
                          
                          <div style="text-align:left; display:flex;">
                              <span class="new_first" v-if="item.isRedEnvelopes==1">红包</span>
                              <span class="new_youhui" v-if="item.isCoupon==1">优惠券</span>
                              <span class="new_last" v-if="item.isReward==1">打赏</span>
                          </div>
                      </div>
                      <div class="btn23">
                          <button>进店</button>
                      </div>
                  </div>
              </div>
          </div>
      </div>
      <div v-show="newhack" class="shaliang">
      <div class="banxin">
       <img src="../images/组-10@2x.png">
      </div>
        <div class="kaitong" @click="newkai()">去开通</div>
        <div class="delete" @click="guanle()"></div>
      </div>
      <loadingtmp :busy="busy" :datalength="list.length" :loadall="loadall" ></loadingtmp>
  </div>
  <navFooter></navFooter>
<navFooter :pageName="pageName"></navFooter>
   </div>
</template>
<style scoped>
  @import "../../../assets/personal/css/interaction.css";
  .interaction-con{
      width: 100%;
      /* height: 520px; */
      overflow: scroll;
      margin-bottom: 57px;
  }
</style>
<script>
console.log(8888888)
import navFooter from '@/components/footer'
import loadingtmp from '@/components/load/loading'
export default {
    data(){
        return{
            pageName:"personhudong",
            list:{},
            page:1,
            pageSize:10,
            busy:false,
            loadall: false,
            companyName:'',
            his:1,
            newhack:false,
        }
    },
    mounted(){
        //静态店家api/wep/userHistoricalTraceList/get
        //动态搜索/api/admin/company
        // this.$http.get(this.APIURL_PREFIX+'/api/wap/userHistoricalTraceList/get').then((response) => {
        //     this.list=response.data.data
        //     console.log(response.data)
        // }).catch(function(err){
        //     console.log(err+"失败")
        // });

    },methods:{
        ones(id){
            // $('.interaction-con')
            this.$refs.gundong.scrollTo(0,0);
            this.page=1
             this.busy=false,
            this.loadall=false,
            console.log(id)
           this.his=id
            var params={}
           params.page=this.page
           params.rows=this.pageSize
           params.type=id
           if(""!=this.companyName){
             params.companyName=this.companyName
           }
            this.$http.get(this.APIURL_PREFIX+'/api/wap/interactiveForSearch',{params}).then(res=>{
              this.list=res.data.data
            });
        },
        Seach_btn:function(){
           this.page=1
           this.list=[]
           this.loadMore();
        },
        // 关闭提示框
        guanle(){
               this.newhack=false
        },
        // 去付钱买社群
        newkai(){
        //    layer.msg('去付钱页面')
           window.location='/wap/new_pay.html'
        },
        href(id){

        this.$http.get(this.APIURL_PREFIX + '/api/wap/company/community/'+id).then((response) => {
               console.log(response)

              if(response.data.data.payCommunity==0){

                    if(response.data.data.isme==1){
                           //  自己看没有买的情况
                       this.newhack=true
                    }else{
                           //  用户看没有开通的情况
                    layer.msg('该店铺还未开通社群功能')
                    }
              }else{
                     //  自己看，别人看已经买的情况
           window.location='/wap/hudong.html?id='+id
              }


         }).catch(function (err) {
                console.log(err)
         });
        },
        getHistoricalTraceList(flag){
            ///api/wap/userHistoricalTraceList/get历史记录
            if(this.his==1){
              var params={}
           params.page=this.page
           params.rows=this.pageSize
           params.type=this.his
           if(""!=this.companyName){
             params.companyName=this.companyName
           }
            this.$http.get(this.APIURL_PREFIX+'/api/wap/interactiveForSearch',{params}).then(res=>{
                if(flag){
                    this.list = this.list.concat(res.data.data);
                }else{
                    this.list = res.data.data;
                }
                if( 0 == res.data.data.length || res.data.data.length<this.pageSize ){
                    this.busy = true;
                    this.loadall = true;
                }
                else{
                    this.busy = false;
                    this.page++
                }
            });
            }else{
              var params={}
           params.page=this.page
           params.rows=this.pageSize
           params.type=this.his
           if(""!=this.companyName){
             params.companyName=this.companyName
           }
            this.$http.get(this.APIURL_PREFIX+'/api/wap/interactiveForSearch',{params}).then(res=>{
                if(flag){
                    this.list = this.list.concat(res.data.data);
                }else{
                    this.list = res.data.data;
                }
                if( 0 == res.data.data.length || res.data.length<this.pageSize ){
                    this.busy = true;
                    this.loadall = true;
                }
                else{
                    this.busy = false;
                    this.page++
                }
            }); 
            }
           
        },
        loadMore(){
            this.busy = true;
            setTimeout(() => {
                this.getHistoricalTraceList(this.page>1);
            }, 300);
        }
    },
     watch: {	
        companyName:function(newVal, ordVal){
           if(""==newVal){
               this.page=1;   
               this.busy=false,
               this.loadall=false,
               this.$router.push({ name: 'Interaction_personal' })
               this.loadMore();
           }
        }
     },
    components: {
        navFooter,
        loadingtmp
    },
}

</script>

